<template>
  <div id="food">
    <div>
      <p style="background-color: rgb(242, 242, 242)">查询</p>
      <div id="sousuo">
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline"
                 label-width='60px'
                 label-position='left'>
          <el-form-item label="搜索"
                        id="saixuan">
            <el-input v-model="formInline.user"
                      @keyup.enter.native="chaxun"
                      placeholder="可以根据菜名进行搜索"></el-input>
          </el-form-item>
          <el-form-item label="筛选">
            <el-select v-model="formInline.region"
                       @change="chaxun()"
                       placeholder="可以根据菜品类别进行筛选">
              <el-option label="全选"
                         value="全选"></el-option>
              <el-option label="炒菜"
                         value="炒菜"></el-option>
              <el-option label="蒸菜"
                         value="蒸菜"></el-option>
              <el-option label="汤菜"
                         value="汤菜"></el-option>
              <el-option label="主食"
                         value="主食"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <p style="background-color: rgb(242, 242, 242)">菜品档案
        <el-button type="danger"
                   @click="pilianshuanchu"
                   round>批量删除</el-button>
        <el-button type="success"
                   @click="xingzenbiaodan"
                   round>新增</el-button>
      </p>
      <el-dialog title="新增菜品"
                 :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="菜品图片"
                        id="tupian"
                        class="zbj">
            <el-upload class="avatar-uploader"
                       action="https://jsonplaceholder.typicode.com/posts/"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl"
                   :src="imageUrl"
                   class="avatar">
              <i v-else
                 class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span>提示;图片大小不超过300kb<br>最佳图片尺寸为203*140</span>
          </el-form-item>
          <div class="clear">
            <div class="fen">
              <div id="cpbh"
                   class="clear">
                <el-form-item label="菜品编号">
                  <el-input v-model="form.menu_num"
                            placeholder="菜品编号"
                            :disabled=checked></el-input>
                </el-form-item>
                <el-checkbox v-model="checked"
                             id='zdbh'>自动生成编号</el-checkbox>
              </div>
              <el-form-item label="菜品单位">
                <el-select v-model="form.menu_danwei"
                           placeholder="请选择">
                  <el-option v-for="(item,index) in arrdw"
                             :key="index"
                             :label="item"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <div class="clear ">
                <el-form-item label="特价"
                              class="clear anz">
                  <el-input v-model="form.menu_tj"
                            placeholder="菜品特价"></el-input>
                </el-form-item>
                <el-button type="info"
                           plain>设置</el-button>
              </div>
              <el-form-item label="菜品类别">
                <el-select v-model="form.menu_category"
                           placeholder="请选择">
                  <el-option v-for="(item,index) in arrlb"
                             :key="index"
                             :label="item"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="菜品口味">
                <el-select v-model="form.menu_taste"
                           placeholder="请选择">
                  <el-option v-for="(item,index) in arrkw"
                             :key="index"
                             :label="item"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="外卖点餐展示">
                <el-switch v-model="form.delivery"></el-switch>
              </el-form-item> -->
            </div>

            <div class="fen">
              <el-form-item label="菜品名称"
                            class="qunkuan">
                <el-input v-model="form.menu_name"
                          placeholder="菜品名称"></el-input>
              </el-form-item>
              <el-form-item label="菜品单价"
                            class="qunkuan">
                <el-input v-model="form.menu_price"
                          placeholder="0.00"></el-input>
              </el-form-item>
              <div class="clear">
                <el-form-item label="库存数量"
                              class="clear anz">
                  <el-input v-model="form.menu_amount"
                            placeholder="库存预警"></el-input>
                </el-form-item>
                <el-button type="Warning"
                           plain>预警</el-button>
              </div>
              <el-form-item label="菜品规格">
                <el-select v-model="form.menu_size"
                           placeholder="请选择">
                  <el-option v-for="(item,index) in arrsize"
                             :key="index"
                             :label="item"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-switch v-model="form.menu_status"></el-switch>
              </el-form-item>
              <!-- <el-form-item label="门店点餐展示">
                <el-switch v-model="form.delivery"></el-switch>
              </el-form-item> -->
            </div>
          </div>

          <el-form-item label="备注"
                        class="zbj clear">
            <el-input type="textarea"
                      v-model="form.menu_note"></el-input>
          </el-form-item>
          <el-form-item class="bdan">
            <el-button type="primary"
                       @click="onSubmit">确认</el-button>
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <div id="biaoge">
        <el-table :data="tableData"
                  @selection-change="xuanzhong"
                  :row-key="getRowKeys"
                  stripe
                  style="width: 100%"
                  :cell-style="{border:'1px solid #DCDCDC'}"
                  :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
          <el-table-column type="selection"
                           @selection-change="xuanzhong"
                           :reserve-selection="true"
                           fixed="left"
                           label=""
                           width="120"
                           align='center'>
          </el-table-column>
          <el-table-column prop="menu_id"
                           label="菜品编号"
                           width="100"
                           align='center'></el-table-column>
          <el-table-column prop="menu_name"
                           label="菜品名称"
                           width="100"
                           align='center'></el-table-column>
          <el-table-column prop="menu_price"
                           label="菜品单价"
                           width="120"
                           align='center'></el-table-column>
          <el-table-column prop="menu_category"
                           label="菜品类别"
                           width="120"
                           align='center'></el-table-column>
          <el-table-column prop="menu_taste"
                           label="口味名称"
                           width="80"
                           align='center'></el-table-column>
          <el-table-column prop="menu_size"
                           label="规格名称"
                           width="120"
                           align='center'></el-table-column>
          <el-table-column prop="menu_danwei"
                           label="单位名称"
                           width="80"
                           align='center'></el-table-column>
          <el-table-column prop="menu_status"
                           label="状态"
                           width="100"
                           align='center'></el-table-column>
          <el-table-column fixed="right"
                           label="操作"
                           align='center'>
            <template slot-scope="scope">
              <el-button @click="onCheck(scope.row)"
                         type="text"
                         size="small">编辑</el-button>
              <el-button @click="shuanchu(scope.row.menu_id,1)"
                         type="text"
                         size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="编辑菜品"
                   :visible.sync="bianji"
                   width="30%"
                   :center='true'>
          <el-form ref="adddata"
                   :model="adddata"
                   label-width="80px">
            <el-form-item label="菜品编号">
              <el-input v-model="adddata.menu_id"></el-input>
            </el-form-item>
            <el-form-item label="菜品名称">
              <el-input v-model="adddata.menu_name"></el-input>
            </el-form-item>
            <el-form-item label="菜品单价">
              <el-input v-model="adddata.menu_price"></el-input>
            </el-form-item>
            <el-form-item label="菜品类别">
              <el-input v-model="adddata.menu_category"></el-input>
            </el-form-item>
            <el-form-item label="口味名称">
              <el-input v-model="adddata.menu_taste"></el-input>
            </el-form-item>
            <el-form-item label="规格名称">
              <el-input v-model="adddata.menu_size"></el-input>
            </el-form-item>
            <el-form-item label="单位名称">
              <el-input v-model="adddata.menu_danwei"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-input v-model="adddata.menu_status"
                        disabled></el-input>
            </el-form-item>
            <el-form-item class="bjan"
                          label-width="0px">
              <el-button type="primary"
                         @click="bianjiqueren()"
                         class="qqq">确 定</el-button>
              <el-button class="qqq2"
                         @click="bianji = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 页码 -->
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="[5,10,15,20,25,30]"
                       :page-size="5"
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="zhongtiao">
        </el-pagination>
      </div>
    </div>
  </div>
</template>


<script>
import { number } from 'echarts/core'
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      quan: [],
      quan1: [],
      tableData: [],
      checked: false,
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        menu_num: '',
        menu_price: '',
        menu_tj: '',
        menu_category: '',
        menu_taste: "",
        menu_name: "",
        menu_price: '',
        menu_danwei: '',
        menu_size: '',
        menu_status: true,
        menu_amount: ''
      },
      imageUrl: '',
      ye: 1,
      tiao: 5,
      idlist: [],
      bianji: false,
      adddata: {
        menu_id: '',
        menu_name: '',
        menu_price: '',
        menu_category: '',
        menu_taste: '',
        menu_size: '',
        menu_danwei: '',
        menu_status: ''
      },
      arrdw: [],
      arrlb: [],
      arrsize: [],
      arrkw: []
    }
  },
  methods: {
    xuanranaxios () {
      this.$axios({
        method: 'get',
        url: '/food/xuanran'
      }).then((res) => {
        let a = this.quan
        a = res.data.data
        let arr = []
        let arr1 = []
        let arr2 = []
        let arr3 = []
        a.forEach((v, i) => {
          if (v.menu_danwei != null) {
            arr.push(v.menu_danwei)
          }
          if (v.menu_category != null) {
            arr1.push(v.menu_category)
          }
          if (v.menu_size != null) {
            arr2.push(v.menu_size)
          }
          if (v.menu_taste != null) {
            arr3.push(v.menu_taste)
          }

        })
        arr = Array.from(new Set(arr))
        arr1 = Array.from(new Set(arr1))
        arr2 = Array.from(new Set(arr2))
        this.arrsize = [...arr2]
        arr3 = Array.from(new Set(arr3))
        this.arrkw = [...arr3]
        this.arrdw = [...arr]
        this.arrlb = [...arr1]
        this.quan = [...a]
        this.chaxun()
      })
    },
    // 新增
    onSubmit () {
      this.$axios({
        method: 'post',
        url: '/food/xinzen',
        data: this.form
      }).then((res) => {
        if (res) {
          this.xuanranaxios()
          this.$message({
            showClose: true,
            message: '恭喜你，菜品信息增加成功！',
            type: 'success',
            duration: 2000,
          })
        }
      })
      this.dialogFormVisible = false
    },
    xingzenbiaodan () {
      this.form = {
        menu_num: '',
        menu_price: '',
        menu_tj: '',
        menu_category: '',
        menu_taste: "",
        menu_name: "",
        menu_price: '',
        menu_danwei: '',
        menu_size: '',
        menu_status: true,
        menu_amount: ''
      }
      this.dialogFormVisible = true

    },
    //选择
    chaxun () {
      let a = this.formInline.region
      let b = this.formInline.user
      this.quan1 = [...this.quan]
      if (a != '') {
        if (a != '全选') {
          let arr = this.quan1.filter((item, idex, arr) => {
            if (item["menu_category"] == a) {
              return item
            }
          })
          this.quan1 = [...arr]
        }
      }
      if (b != '') {
        let arr1 = this.quan1.filter((item, idex, arr) => {
          if (item["menu_name"].indexOf(b) >= 0) {
            return item
          }
        })
        this.quan1 = [...arr1]
      } else {
        if (a == '' || a == '全选') {
          this.quan1 = [...this.quan]
        }
      }
      this.xuanran()
    },
    // 编辑详情
    onCheck (data) {
      this.bianji = true;
      this.adddata = { ...data }
    },
    //编辑确认
    bianjiqueren () {
      this.$axios({
        method: 'post',
        url: '/food/bianji',
        data: this.adddata
      }).then((res) => {
        if (res) {
          this.ye = 1
          this.xuanranaxios()
          this.$message({
            showClose: true,
            message: '恭喜你，菜品信息修改成功！',
            type: 'success',
            duration: 2000,
          })
        }
      })
      this.bianji = false
    },
    // 每页多少条数据
    handleSizeChange (val) {
      this.tiao = val
      this.xuanran()
    },
    // 当前页
    handleCurrentChange (val) {
      this.ye = val
      this.xuanran()
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    //上传图片
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    xuanran () {
      this.tableData = this.quan1.slice((this.ye - 1) * this.tiao, this.ye * this.tiao)
    },
    getRowKeys (row) {
      return row.menu_id
    }
    ,
    //多选中的id
    xuanzhong (val) {
      this.idlist.length = 0
      val.forEach(item => {
        this.idlist.push(item.menu_id)
        console.log(this.idlist);
      })
    },
    //删除
    shuanchu (data, num) {
      console.log(data, num);
      this.$axios({
        method: 'post',
        url: '/food/shuanchu',
        data: { data: data, numb: num }
      }).then((res) => {
        if (res) {
          this.ye = 1
          this.xuanranaxios()
          this.$message({
            showClose: true,
            message: '恭喜你，菜品信息删除成功！',
            type: 'success',
            duration: 2000,
          })
        }
      })
    },
    //批量删除
    pilianshuanchu () {
      this.shuanchu(this.idlist, 2)
    },
  },
  mounted () {
    this.xuanranaxios()

  },
  computed: {
    zhongtiao () {
      return this.quan1.length
    }

  }
}

</script>


<style lang="less" scoped>
#food {
  p {
    font-size: 20px;
    padding: 0 20px;
    border: 1px solid #dcdcdc;
    height: 68px;
    line-height: 68px;
    button {
      float: right;
      margin-top: 14px;
      margin-right: 15px;
    }
  }
  #sousuo {
    padding: 20px;
    border: 1px solid #dcdcdc;
    margin-bottom: 10px;
    form {
      height: 64px;
      padding: 11px 0;
    }
    .el-input {
      width: 300px;
    }
  }
}
#biaoge {
  margin-top: 15px;
  border: 1px solid #dcdcdc;
  padding: 18px 10px 20px 10px;
}
.el-table {
  margin-bottom: 30px;
}
.el-pagination {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.fen {
  width: 50%;
  padding: 10px;
  float: left;
}
</style>

<style lang="less" >
.el-form-item__label {
  text-align: left;
}
#food {
  #saixuan {
    margin-right: 40px;
  }
  .el-dialog {
    width: 80%;
    #tupian {
      .el-form-item__label {
        line-height: 178px;
      }
      .avatar-uploader {
        float: left;
      }
      span {
        margin: 47px 10px;
        display: inline-block;
      }
    }
    #cpbh {
      .el-form-item {
        float: left;
        width: 400px;
        .el-input {
          width: 70%;
        }
      }
      #zdbh {
        height: 40px;
        line-height: 40px;
      }
    }
    .anz {
      float: left;
      .el-form-item__label {
        text-align: left;
        width: 69px;
      }
      .el-form-item__content {
        width: 410px;
        .el-input {
          width: 70%;
        }
      }
    }
    .qunkuan {
      .el-input {
        width: 77.5%;
      }
    }
    .zbj {
      padding: 0 10px;
      .el-form-item__content {
        float: left;
        .el-textarea__inner {
          width: 1025px;
        }
      }
    }
    .el-select {
      width: 77.5%;
    }
    .bdan {
      text-align: center;
      button {
        width: 150px;
        margin: 0 30px;
      }
    }
  }
  .bjan {
    text-align: center;
    position: relative;
    .qqq {
      position: absolute;
      top: 0px;
      left: 200px;
    }
    .qqq2 {
      position: absolute;
      top: 0px;
      left: 300px;
    }
  }
}
</style>